<template>
  <div class="route-page">
    <a-card class="card-with-title-page" title="合同条款类型" size="small">
      <template #extra>
        <a-button
          v-permission="['contractClause', 'curd', 'add']"
          type="primary"
          @click="editType()"
        >
          <template #icon>
            <PlusOutlined />
          </template>
          条款类型
        </a-button>
      </template>
      <!-- 表格 -->
      <a-table
        sticky
        :columns="columns"
        :data-source="typeList"
        row-key="id"
        :loading="loading"
        :pagination="pagination"
        @change="handleTableChange"
        :scroll="{ x: 'max-content' }"
      >
        <template #bodyCell="{ text, record, index, column }">
          <template v-if="column.key === 'statusTxt'">
            <a-badge v-if="text == 1" status="success" text="开启" />
            <a-badge v-if="text == 0" status="error" text="关闭" />
          </template>
          <template v-if="column.key === 'cost_type'">
            <span>{{ text || "--" }}</span>
          </template>
          <template v-if="column.key === 'bond_type'">
            <span>{{ text || "--" }}</span>
          </template>
          <template v-if="column.key === 'action'">
            <a-button
              type="link"
              :disabled="!record.operate"
              danger
              @click="deleteType(record)"
            >
              删除
            </a-button>
          </template>
        </template>
      </a-table>
    </a-card>
    <type-edit
      :visible="typeEditVisible"
      :id="typeId"
      @cancel="handleTypeEditCancel"
      @success="handleTypeEditSuccess"
    />
  </div>
</template>

<script>
import { defineComponent, ref, watch, computed } from "vue";
import { PlusOutlined } from "@ant-design/icons-vue";
import TypeEdit from "./modules/TypeEdit.vue";
import request from "../../../common/utils/request";
import utils from "../../../common/utils/utils";
import { message } from "ant-design-vue";

export default defineComponent({
  name: "contractClause",
  components: { PlusOutlined, TypeEdit },
  setup() {
    /**
     * @description: 分页信息
     */
    const page = ref(1);
    const pageSize = ref(10);
    const total = ref(0);
    const pagination = computed(() => ({
      total: total.value,
      current: page.value,
      pageSize: pageSize.value,
      showSizeChanger: true,
    }));
    const handleTableChange = (pager, filters, sorter) => {
      page.value = pager.current;
      pageSize.value = pager.pageSize;
    };

    /**
     * @description: 表格数据
     */
    const loading = ref(false);
    const typeList = ref([]);
    watch([page, pageSize], () => {
      getTableData();
    });
    const getTableData = () => {
      loading.value = true;
      request
        .get("/org", "/contract/clauseList", {
          page: page.value,
          limit: pageSize.value,
        })
        .then((res) => {
          typeList.value = res.list;
          total.value = Number(res.total);
        })
        .finally(() => {
          loading.value = false;
        });
    };

    /**
     * @description: 增删改操作
     */
    // 编辑、添加
    const typeEditVisible = ref(false);
    const typeId = ref(0);
    const editType = (id) => {
      typeEditVisible.value = true;
      typeId.value = id || 0;
    };
    const handleTypeEditCancel = () => {
      typeEditVisible.value = false;
      typeId.value = 0;
    };
    const handleTypeEditSuccess = () => {
      handleTypeEditCancel();
      page.value = 1;
      getTableData();
    };

    // 删除
    const deleteType = (record) => {
      utils.modalConfirm({
        content: `删除该合同条款类型，将无法选用该条款类型，但不会影响已使用该条款类型的合同，是否确认删除“${record.name}”合同条款类型?`,
        onOk: () => {
          request
            .get("/org", "/contract/delClause", {
              id: record.id,
              needMsg: true,
            })
            .then((res) => {
              message.success(res.msg || "删除成功！");
              getTableData();
            });
        },
      });
    };

    // 初始化
    const init = () => {
      getTableData();
    };

    init();

    return {
      typeList,
      columns,
      loading,
      pagination,
      typeEditVisible,
      typeId,
      handleTypeEditCancel,
      handleTypeEditSuccess,
      editType,
      deleteType,
      handleTableChange,
    };
  },
});

const columns = [
  {
    title: "条款类型名称",
    dataIndex: "name",
    key: "name",
  },
  {
    title: "条款属性",
    dataIndex: "attribute",
    key: "attribute",
  },
  {
    title: "保证金条款",
    dataIndex: "use_bond",
    key: "statusTxt",
  },
  {
    title: "租期条款",
    dataIndex: "use_lease",
    key: "statusTxt",
  },
  {
    title: "递增条款",
    dataIndex: "use_incr",
    key: "statusTxt",
  },
  {
    title: "优惠条款",
    dataIndex: "use_discount",
    key: "statusTxt",
  },
  {
    title: "费用类型",
    dataIndex: "cost_type",
    key: "cost_type",
  },
  {
    title: "保证金类型",
    dataIndex: "bond_type",
    key: "bond_type",
  },
  {
    title: "操作",
    dataIndex: "id",
    key: "action",
  },
];
</script>

<style lang="less" scoped></style>
